<template>
  <div class="consult-page">
    <!-- 背景层 -->
    <div class="background-layer">
      <img :src="backgroundImage" alt="咨询背景" class="background-image" />
    </div>

    <!-- 内容层 -->
    <div class="content-container">
      <h1 class="page-title">最新房屋信息</h1>

      <!-- 资讯列表 -->
      <div class="info-list">
        <div
          class="info-item"
          v-for="item in newsList"
          :key="item.id"
          @click="handleViewDetail(item.houseId)"
        >
          <div class="item-header">
            <h3>{{ item.title }}</h3>
            <span class="time">{{ formatTime(item.createTime) }}</span>
            <i class="el-icon-arrow-right"></i>
          </div>
          <p class="item-content">{{ item.content }}</p>
        </div>
      </div>

      <!-- 分页组件更新 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        :current-page="currentPage"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import api from "@/api";
import backgroundImage from "@/assets/background3.jpg";
import { useRouter } from "vue-router";

const router = useRouter();

// 添加跳转方法
const handleViewDetail = (houseId) => {
  router.push({
    path: `/houses/${houseId}`,
  });
};

// 响应式数据
const newsList = ref([]);
const currentPage = ref(1);
const pageSize = 5;
const total = ref(0);

// 获取新闻数据
const fetchNews = async () => {
  try {
    const res = await api.news.getList({
      page: currentPage.value,
      size: pageSize,
    });

    newsList.value = res.data.data; // 根据实际API响应结构调整
    total.value = res.data.total;
  } catch (error) {
    console.error("获取新闻失败:", error);
  }
};

// 分页处理
const handlePageChange = (val) => {
  currentPage.value = val;
  fetchNews();
};

const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  return `${date.getFullYear()}/${(date.getMonth() + 1)
    .toString()
    .padStart(2, "0")}/${date.getDate().toString().padStart(2, "0")} 
  ${date.getHours().toString().padStart(2, "0")}:${date
    .getMinutes()
    .toString()
    .padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
};

// 初始化加载
onMounted(fetchNews);
</script>

<style scoped lang="css">
/* 新增CSS变量 */
:root {
  --primary-color: #3498db;
  --text-dark: #2c3e50;
  --text-light: #7f8c8d;
  --background-blur: 8px;
}

.consult-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

  /* 增强背景效果 */
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(var(--background-blur));
  }

  .background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02); /* 增强视觉层次 */
    filter: brightness(0.92) contrast(1.05);
  }
}

.content-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.page-title {
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 3rem;
  position: relative;

  &::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    margin: 1.2rem auto 0;
    opacity: 0.8;
  }
}

.info-list {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4px);
}

.item-header h3 {
  color: #2d3436; /* 深灰黑色 */
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.info-item {
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.15);

    .el-icon-arrow-right {
      transform: translateX(4px);
      color: var(--primary-color);
    }
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.item-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;

  h3 {
    flex: 1;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-right: 1.5rem;
    line-height: 1.4;
    letter-spacing: 0.5px;
  }

  .time {
    color: var(--text-light);
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .el-icon-arrow-right {
    color: #bdc3c7;
    font-size: 1.6rem;
    margin-left: 1rem;
    transition: all 0.3s ease;
  }
}

.item-content {
  color: #666;
  line-height: 1.7;
  font-size: 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--primary-color);
  margin-left: 0.5rem;
  position: relative;
  color: #4a4a4a; /* 中灰色 */
  line-height: 1.7;
  border-left: 3px solid #3498db;
  flex: 1 1 auto; /* 允许伸缩 */
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;

  -webkit-box-orient: vertical;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 0;
    height: 100%;
    width: 2px;
    background: rgba(52, 152, 219, 0.1);
  }
}

/* 分页组件深度定制 */
:deep(.el-pagination) {
  --el-pagination-bg-color: transparent;
  --el-pagination-button-disabled-bg-color: transparent;

  &.is-background .btn-next,
  &.is-background .btn-prev,
  &.is-background .el-pager li {
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
    }
  }

  &.is-background .el-pager li:not(.is-disabled).is-active {
    background: var(--primary-color);
    color: white;
  }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .content-container {
    padding: 2rem 1rem;
  }

  .page-title {
    font-size: 2rem;

    &::after {
      margin-top: 0.8rem;
    }
  }

  .info-list {
    padding: 1.5rem;
  }

  .info-item {
    /* 高度控制 */
    min-height: 80px; /* 最小高度保障 */
    padding: 12px 16px; /* 紧凑内边距 */
    margin-bottom: 12px;

    /* 弹性布局 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .item-header {
    flex: 0 0 auto; /* 禁止伸缩 */
    margin-bottom: 8px;

    h3 {
      font-size: 15px; /* 标题字号缩小 */
      line-height: 1.3; /* 紧凑行高 */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .time {
      font-size: 12px; /* 时间微缩小 */
    }
  }

  .item-content {
    font-size: 0.95rem;
    padding-left: 0.8rem;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.8rem;
  }

  :deep(.el-pagination) {
    --el-pagination-font-size: 14px;

    .btn-prev,
    .btn-next,
    .el-pager li {
      min-width: 32px;
      height: 32px;
      margin: 0 3px;
    }
  }
}
.background-layer::after {
  background: transparent !important; /* 完全移除白色遮罩 */
  backdrop-filter: blur(8px) brightness(0.96); /* 保留背景模糊效果 */
}
</style>
